<template>
  <div id="app">
    <div class="background-image" :style="{ backgroundImage: `url(${currentBackground})` }"></div>
    <div class="background-overlay"></div>
    <router-view />
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'

export default {
  name: 'App',
  setup() {
    const currentBackground = ref('')
    
    // 背景图片列表 - 您可以将图片放在 public/images/ 目录下
    const backgroundImages = [
      '/images/bg1.jpg',
      '/images/bg2.jpg',
      '/images/bg3.jpg',
      '/images/bg4.jpg',
      '/images/bg5.jpg',
      '/images/bg7.jpg',
      '/images/bg8.jpg',
      '/images/bg9.jpg'
    ]
    
    const setRandomBackground = () => {
      const randomIndex = Math.floor(Math.random() * backgroundImages.length)
      currentBackground.value = backgroundImages[randomIndex]
    }
    
    onMounted(() => {
      setRandomBackground()
      // 监听全局事件：当收到刷新背景事件时，随机切换背景
      window.addEventListener('app:refresh-background', setRandomBackground)
    })

    onUnmounted(() => {
      window.removeEventListener('app:refresh-background', setRandomBackground)
    })
    
    return {
      currentBackground
    }
  }
}
</script>


